<template>
    <div class="home">
        <div class="login-box">
            <div class="left">
                <div>
                    <div>起重机智能</div>
                    <div>安全保障平台</div>
                    <div class="line" />
                    <div>CISP</div>
                </div>
            </div>
            <div class="right">
                <img src="@/assets/image/login/logo.png" />
                <div class="sub-title">crane intelligence safeguard platform</div>
                <el-form :model="form" :rules="rules" ref="formRef">
                    <el-form-item prop="phone">
                        <el-input v-model="form.phone" placeholder="工号" style="height: 50px; margin-top: 40px" @keydown="keydown">
                            <template #prefix>
                                <i class="iconfont icon-gonghao" style="color: #fff"></i>
                            </template>
                        </el-input>
                    </el-form-item>
                    <el-form-item prop="password">
                        <el-input v-model="form.password" placeholder="密码" type="password" show-password style="height: 50px" @keydown="keydown">
                            <template #prefix>
                                <i class="iconfont icon-mima" style="color: #fff"></i>
                            </template>
                        </el-input>
                    </el-form-item>
                    <el-form-item>
                        <div class="login" @click="handlerLogin">登录</div>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
import { loginVerification, syncMenu } from "@/service/api/login.js";
import { mainStore } from "@/store/main.js";
import menu from "@/pages/config.js";

const store = mainStore();
const router = useRouter();
const form = ref({
    phone: "",
    password: ""
});
const formRef = ref(null);
let isResult = false;
const handlerLogin = () => {
    formRef.value.validate(async (valid) => {
        if (valid) {
            isResult = true;
            // syncMenu(menu);
            const loadingInstance = ElLoading.service({ fullscreen: true });
            const res = await loginVerification({
                loginName: form.value.phone,
                pwd: form.value.password
            }).catch((err) => loadingInstance.close());
            if (res.code === 200) {
                localStorage.setItem("token", res.data.token);
                delete res.data.token;
                store.userInfo = res.data;
                localStorage.setItem("userInfo", JSON.stringify(res.data));
                store.setMenu(res.data.powers.menus);
                router.push("/main/home");
            }
            loadingInstance.close();
            isResult = false;
        }
    });
};
const rules = {
    phone: [
        {
            validator: (rule, value, callback) => {
                if (!value) {
                    callback(new Error("请输入工号"));
                } else {
                    return true;
                }
            },
            trigger: "change"
        }
    ],
    password: [
        {
            validator: (rule, value, callback) => {
                if (!value) {
                    callback(new Error("请输入密码"));
                } else {
                    return true;
                }
            },
            trigger: "change"
        }
    ]
};
const keydown = (e) => {
    if (e.code == "Enter" && !isResult) {
        handlerLogin();
    }
};
</script>

<style lang="scss" scoped>
.home {
    background: url(@/assets/image/login/login-bg.png) center/100% no-repeat;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    .login-box {
        display: flex;
        position: relative;
        width: 750px;
        height: 420px;
        margin: 0 auto;
        border-radius: 8px;
        overflow: hidden;
        .left {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 270px;
            background: linear-gradient(180deg, rgba(12, 30, 40, 0.7) 0, #204b62 50%, rgba(12, 30, 40, 0.7) 100%);
            font-size: 26px;
            font-weight: 400;
            color: #ffffff;
            div {
                &:first-of-type {
                    margin-bottom: 5px;
                }
            }
            .line {
                margin: 32px 0 16px 0;
                width: 30px;
                height: 2px;
                background: #ffffff;
            }
        }
        .right {
            position: relative;
            box-sizing: border-box;
            padding: 0 40px 40px 40px;
            width: 480px;
            background-color: rgba(12, 30, 40, 0.7);
            text-align: center;
            img {
                margin-top: 57px;
                width: 250px;
                height: 30px;
            }
            .sub-title {
                margin-top: 16px;
                font-size: 12px;
                color: #c5d8ff;
            }
        }
        ::v-deep(.el-input__wrapper) {
            border-radius: 5px;
            background-color: rgba(75, 166, 221, 0.15);
            box-shadow: 0 0 0 0px var(--el-input-border-color, var(--el-border-color)) inset;
            color: #fff;
        }
        ::v-deep(.el-input__inner) {
            color: #fff;
            &::placeholder {
                color: #fff;
            }
        }
        .login {
            margin-top: 34px;
            width: 100%;
            height: 50px;
            line-height: 50px;
            text-align: center;
            background: #0065b2;
            box-shadow: 2px 2px 4px 0px rgba(0, 101, 178, 0.3);
            border-radius: 5px;
            color: #ffffff;
            font-size: 16px;
            cursor: pointer;
        }
    }
}
</style>
